<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no' />
  <meta name='renderer' content='webkit'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>预约记录</title>
</head>
<style>
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;background:#f7f7f7}
  img{border:0;vertical-align:top;image-rendering:-moz-crisp-edges;image-rendering:-o-crisp-edges;image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;-ms-interpolation-mode:nearest-neighbor;-ms-interpolation-mode:bicubic}
  .header{width:100%;height:80px;padding:0 46px;display:flex;justify-content:space-around;background:#fff}
  .header .nav{position:relative;height:100%;line-height:80px;font-size:32px;color:#000}
  .header .nav.active{color:#1f8fff}
  .header .nav.active::before{display: block;content:'';height:7px;width: 60px;position: absolute;bottom: 0;left:50%;transform: translateX(-50%);background-repeat: no-repeat;background-position: center center; background-image: url('../assets/img/line.png');}
  .header .nav img{position:absolute;bottom:0;left:50%;transform:translateX(-50%)}
  .content{padding:20px 46px 100px;}
  .navbox{display: none;}
  .navbox.active{display: block;}
  .nodata{min-height:calc(100vh - 300px); display:flex;flex-direction: column;justify-content: center;align-items: center;font-size:26px;color:#999;}
  .nodata img{margin-bottom: 20px;}
  .tips{position:relative;top:-20px;left:-46px;right:-46px;width: 100vw;height:80px;padding:0 46px;line-height: 80px;font-size:26px;display: flex;align-items: center;background: #f5e9cf;}
  .tips img{margin-right: 10px;width:30px;height: 30px;}
  .tips div{display: flex;}
  .tips span{font-size: 32px;color:#f8730a;font-weight: bold;margin:0 5px;}
  .box{font-size:28px;color:#0a1116;width:100%;background:#fff;border-radius:20px;line-height:106px;padding:0 36px;margin-bottom:20px}
  .box span{color:#1f8fff;margin-right:10px}
  .more{text-align:center;font-size:26px;color:#999;margin-top:30px;position: relative;}
  .more::before{content:'';display: block;width: 24px;height: 24px;position: absolute;right:50%;top:26%;transform: translate(120px);background-repeat: no-repeat;background-position: center center; background-image: url('../assets/img/down.png');}
  .footer{position:fixed;bottom:0;left:0;z-index:10;width:100%;height:90px;border:2px solid #ddd;display:flex;justify-content:space-around;align-items:center;background:#fff}
  .footer .nav{text-align:center;color:#333;font-size:20px;display:flex;flex-direction:column;justify-content:center}
  .footer .nav.active{color:#1f8fff}
  .footer .nav img{height:42px;width:auto;margin-bottom:5px;display:block;margin:0 auto}
</style>

<body>
  <div class="header">
    <div class="nav">已预约</div>
    <div class="nav">已进站</div>
    <div class="nav">已取消</div>
    <div class="nav active">已过期</div>
  </div>
  <div class="content">
    <div class="navbox">
      <div class="tips">
        <img src="../assets/img/icon.png" alt="">
        <div>请务必在预约时间段前后 <span>10分钟</span>内进站。</div>
      </div>
      <div class="nodata">
        <img src="../assets/img/img.jpg" alt="">
        <div>暂无数据</div>
      </div>
    </div>
    <div class="navbox">
      <div class="nodata">
        <img src="../assets/img/img.jpg" alt="">
        <div>近两周没有记录</div>
        <div class="more">查看更早记录</div>
      </div>
    </div>
    <div class="navbox">
      <div class="nodata">
        <img src="../assets/img/img.jpg" alt="">
        <div>近两周没有记录</div>
        <div class="more">查看更早记录</div>
      </div>
    </div>
    <div class="navbox active">
      <div class="list"></div>
      <div class="more">查看更早记录</div>
    </div>
  </div>
  <div class="footer">
    <div class="nav">
      <img src="../assets/img/home.jpg">
      <div>预约</div>
    </div>
    <div class="nav">
      <img src="../assets/img/ewm.jpg">
      <div>进站码</div>
    </div>
    <div class="nav active">
      <img src="../assets/img/list.jpg">
      <div>预约记录</div>
    </div>
    <div class="nav">
      <img src="../assets/img/my.jpg">
      <div>我的</div>
    </div>
  </div>
</body>
<!-- 页面宽度750 -->
<script>
  var view_timer = null;
  function viewPort(userAgent, pageWidth) {
    var oView = document.getElementById('viewport');
    if (oView) {
      document.head.removeChild(oView);
    }
    if (!pageWidth) {
      pageWidth = 750;
    }
    var screen_w = parseInt(window.screen.width),
      scale = screen_w / pageWidth;
    if (/Android (\d+\.\d+)/.test(userAgent)) {
      var creat_meta = document.createElement('meta');
      creat_meta.name = 'viewport';
      creat_meta.id = 'viewport';
      var version = parseFloat(RegExp.$1);
      if (version > 2.3) {
        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ',user-scalable=1, minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', target-densitydpi=device-dpi';
      } else {
        creat_meta.content = '"width=' + pageWidth + ', target-densitydpi=device-dpi';
      }
      document.head.appendChild(creat_meta);
    } else {
      var creat_meta = document.createElement('meta');
      creat_meta.name = 'viewport';
      creat_meta.id = 'viewport';
      if (window.orientation == '-90' || window.orientation == '90') {
        scale = window.screen.height / pageWidth;
        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
      }
      else {
        creat_meta.content = 'width=' + pageWidth + ', initial-scale = ' + scale + ' ,minimum-scale = ' + scale + ', maximum-scale = ' + scale + ', user-scalable=no, target-densitydpi=device-dpi';
      }
      document.head.appendChild(creat_meta);
    }
  }
  viewPort(navigator.userAgent);
  window.onresize = function () {
    clearTimeout(view_timer);
    view_timer = setTimeout(function () {
      viewPort(navigator.userAgent);
    }, 500);
  }
</script>
<!-- 假期预约修正 -->
<script>
  var holiday,
      workday;
  function isDay(m,d,dayList){
    var istrue = false;
    dayList.map(function(item,index){
      var dayL = item.split('-')
      if(m == dayL[0] && d == dayL[1]){
        istrue = true
      }
    })
    return istrue
  }

  // 2022节假日排除
  holiday = ['1-1','1-2','1-3','1-31','2-1','2-2','2-3','2-4','2-5','2-6','4-3','4-4','4-5','4-30','5-1','5-2','5-3','5-4','6-3','6-4','6-5','9-10','9-11','9-12','10-1','10-2','10-3','10-4','10-5','10-6','10-7'];
  // 2022调休补齐
  workday = ['1-29','1-30','4-2','4-24','5-7','10-8','10-9'];

</script>
<!-- 数据拼接 -->
<script>
  var text = '',
      timestamp = Date.parse(new Date()),
      timeList = ['06:30~06:40','06:40~06:50','06:50~07:00','07:00~07:10','07:10~07:20'];
  // function add0(m) { return m < 10 ? '0' + m : m }
  function format(timestamp) {
    var time = new Date(timestamp);
    var y = time.getFullYear(),
        m = time.getMonth() + 1,
        d = time.getDate(),
        w = time.getDay();
    if(!isDay(m,d,workday)){
      if (w == 0 || w == 6 || isDay(m,d,holiday)) {
        return false
      }
    }
    return m + '月' + d + '日';
  }

  for (let i = 0; i < 8; i++) {
    var timenum = timestamp - 86400000 * i,//时间戳
        daystr = format(timenum),//日期格式化
        timestr = timeList[parseInt(Math.random()*5)];// 随机时间段
    if (daystr) {
      text += '<div class="box">昌平线-沙河站 <span>' + daystr + '</span><span>('+ timestr +')</span></div>'
    }
  }
  document.querySelector('.list').innerHTML = text;
</script>
<!-- 顶部导航 -->
<script>
  var nav = document.querySelectorAll('.header .nav');
	var content = document.querySelectorAll('.content .navbox');
	for(var i=0;i<nav.length;i++){
		(function(n){
			nav[n].onclick = function () {
				for (var j = 0; j < nav.length; j++) {
					nav[j].className = "nav";
					content[j].className = "navbox";
				}
				this.className = "nav active";
				content[n].className = "navbox active";
			}
		}(i))
  }
</script>
</html>